<template>
    <div class="contentPage">
       <div class="top" v-cloak>
            <div class="topFont">
                <span class="topIocn el-icon-tickets"></span>
                <span> 售卖机列表</span>
            </div>
            <div class="topTeach" v-cloak>
                <ul>
          <my-company>
                        </my-company>
                    <li>
                        <el-input v-model="code" @keyup.enter.native="searchEnter" @change='searchBtn' clearable placeholder="售卖机编号"></el-input>
                    </li>
                    <li>
                        <el-input v-model="machinesBaseId" @keyup.enter.native="searchEnter" @change='searchBtn' clearable placeholder="售卖机基础ID"></el-input>
                    </li>
                    <li>
                        <el-select v-model="state" placeholder="状态" @change='searchBtn' clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </li>
                    <li>
                        <el-button type="primary" icon="el-icon-search" @click='searchBtn'>查询</el-button>
                    </li>
          
                    <li style="width: 100%;">
                        <a style="color:white;cursor: pointer;" href=''>
                            <el-button type="primary" plain icon="el-icon-download">导出当前页</el-button>
                        </a>

                        <a style="color:white;cursor: pointer;margin-left:10px;">
                            <el-button type="primary" plain icon="el-icon-download">导出全部</el-button>
                        </a>

                        <a style="color:white;cursor: pointer; margin-left:10px;" >
                            <el-button type="primary" plain icon="el-icon-download">批量下载二维码</el-button>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
        <div class="main" v-cloak>

            <el-table v-cloak id="mybox" height="100%" :data="pageDate" style="width:100%;height:100%" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column type="index" min-width="60" fixed></el-table-column>
                <el-table-column prop="code" label="售货机编号" fixed min-width='100'>
                </el-table-column>
                <el-table-column prop="companyName" label="所属机构" min-width="130px">
                    <template slot-scope="scope">
                        <span>{{scope.row.companyName?scope.row.companyName:"/"}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="linkman" label="负责人 " min-width="80px">
                    <template slot-scope="scope">
                        <span>{{scope.row.linkman?scope.row.linkman:"/"}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="machinesBaseId" label="售货机基础ID" min-width="100px">

                </el-table-column>

                <el-table-column prop="locatoinName" label="详细地址 " min-width="250px">
                    <template slot-scope="scope">
                        <span>{{scope.row.locatoinName?scope.row.locatoinName:"/"}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stateName" label="状态" min-width="100px">
                    <template slot-scope="scope">
                        <span>{{scope.row.stateName?scope.row.stateName:"/"}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="reportDate" label="最后通讯时间" min-width="180px">
                    <template slot-scope="scope">
                            <span v-if="!scope.row.reportDate">/</span>
                            <span v-else>{{scope.row.reportDate?scope.row.reportDate:"" | capitalize}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="locatoinDate" label="经纬度更新时间" min-width="180px">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.locatoinDate">/</span>
                        <span v-else>{{scope.row.locatoinDate?scope.row.locatoinDate:"" | capitalize}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注信息  " min-width="160px">
                    <template slot-scope="scope">
                        <span>{{scope.row.remark?scope.row.remark:"/"}}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="350px">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" plain size="mini" @click="machineListEdit(scope.$index, scope.row)">编辑</el-button>
                        <a style="color:white;cursor: pointer;" target="_blank"  >
                            <el-button type="primary" plain size="mini" icon="el-icon-news">货道信息</el-button>
                        </a>
                        <el-button type="warning" plain size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.code.substring(2,4)== 36 || scope.row.code.substring(2,4)== 96"
                            icon="el-icon-mobile-phone">二维码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 编辑弹出框 -->
            <el-dialog title="编辑" :visible.sync="editVisible">
                <el-form :model="editForm">
                    <el-form-item>
                        <p class="dialog_txt">售货机编号:</p>
                        <el-input v-model="editForm.code" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <!-- <el-form-item>
                        <p class="dialog_txt">售货机编号别名:</p>
                        <el-input v-model="editForm.name" auto-complete="off" size="small"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <p class="dialog_txt">责任人:</p>
                        <el-select v-model="editForm.linkman" placeholder="请选择负责人" clearable size="small">
                            <el-option v-for="item in inChargeList" :key="item.name" :label="item.name" :value="item.loginCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">详细地址:</p>
                        <el-input v-model="editForm.locatoinName" auto-complete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">状态:</p>
                        <el-select v-model="editForm.state" placeholder="状态" size="small">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">售货机类型:</p>
                        <el-input v-model="editForm.machinesTypeName" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">货道配置:</p>
                        <el-input v-model="editForm.aisleConfiguration" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">出厂编号:</p>
                        <el-input v-model="editForm.factoryNumber" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">主控程序版本:</p>
                        <el-input v-model="editForm.mainProgramVersion" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">工控一体机编号:</p>
                        <el-input v-model="editForm.ipcNumber" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">提升机构编号:</p>
                        <el-input v-model="editForm.liftingGearNumber" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">电控编号:</p>
                        <el-input v-model="editForm.electricCabinetNumber" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">门体编号:</p>
                        <el-input v-model="editForm.doorNumber" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">空压缩机编号:</p>
                        <el-input v-model="editForm.airCompressorNumber" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">钥匙编号:</p>
                        <el-input v-model="editForm.keyStr" auto-complete="off" disabled size="small"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="dialog_txt">备注消息:</p>
                        <el-input v-model="editForm.remark" auto-complete="off" size="small"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sure">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 二维码弹出框 -->
            <el-dialog title="二维码" :visible.sync="qrCodeVisible">
                <div style="text-align:center;">
                    <img :src="qrCode" alt="" v-if="qrCodeVisible">
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="qrCodeVisible = false">取 消</el-button>
                    <el-button type="primary" @click="qrCodeVisible = false">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div class="foot" v-cloak>
            <!-- 分页 -->
            <div class="panel footer_list" v-cloak>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="currentPage" :page-sizes="[50,100, 150, 200]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="totalResult">
                </el-pagination>
            </div>
     
        </div>
    </div>
</template>

<script>
import myCompany from "../common/companyId";

export default {
        components: {
        myCompany
      },
  data() {
    return {
      companyId: "",
      cname: "",
      page: 1,
      pageSize: 50,
      machinesBaseId: "",
      code: "",
      qrCodeVisible: false,
      editVisible: false,
      editForm: {},
      formLabelWidth: "120px",
      state: "",
      nowCompany: "",
      qrCode: "",
      pageDate: [],
      currentPage: 0,
      totalResult: 0,
      comparylist: [],
      inChargeList: [],
      
      options: [
        {
          value: 20001,
          label: "售货机正常"
        },
        {
          value: 20002,
          label: "售货机未初始化"
        },
        {
          value: 20003,
          label: "损坏"
        },
        {
          value: 20004,
          label: "未投入使用"
        },
        {
          value: 20005,
          label: "售卖机返厂"
        }
      ]
    };
  },
  created: function() {
    // pageInit()
    this.getMachineList();
    this.getCompany();
  },
  filters: {
    capitalize: function(inputTime) {
      if (inputTime == "" || inputTime === undefined || inputTime == null) {
        return "";
      }
      var date = new Date(inputTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  methods: {
    handleEdit: function(index, row) {
      this.qrCodeVisible = true;
      this.qrCode =
        "/ws-microservice-backstage/vendingMachines/DownSmallQr?code=" +
        row.code;
    },
    machineListEdit: function(index, row) {
      this.editVisible = true;
      this.editForm = row;
      this.nowCompany = row.companyId;
      this.$axios
        .get("/ws-microservice-backstage/VendingMachinesInfo/findListPage", {
          params: {
            companyId: this.nowCompany
          }
        })
        .then(response => {
          console.log(response);
          if (response.data.code != 0) {
            this.$message(response.data.msg);
            return;
          }
          this.inChargeList = response.data.data.companyIdMap.comparylist;
        })
        .catch(error => {});
    },
    sure: function() {
      this.editVisible = false;
      this.$axios
        .get("/ws-microservice-backstage/VendingMachinesInfo/update", {
          params: {
            companyId: this.nowCompany,
            locatoinName: this.editForm.locatoinName,
            code: this.editForm.code,
            // name: this.editForm.name,
            state: this.editForm.state,
            linkman: this.editForm.linkman,
            remark: this.editForm.remark
          }
        })
        .then(response => {
          if (response.data.code != 0) {
            this.$message(response.data.msg);
            return;
          }
          this.$message.success(response.data.msg);
        })
        .catch(error => {});
    },
    handleSizeChange: function(val) {
      this.pageSize = val;
      this.getMachineList();
    },
    handleCurrentChange: function(val) {
      this.page = val;
      this.getMachineList();
    },
    getCompany: function() {
      this.$axios
        .get("/ws-microservice-backstage/company/getCompanyTree", {
          params: {}
        })
        .then(response => {
          this.comparylist.push(response.data.data);
        })
        .catch(error => {});
    },
    getMachineList: function() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.pageDate = [];
      this.inChargeList = [];
      var companyId = this.companyId[this.companyId.length - 1];
      this.$axios
        .get("/ws-microservice-backstage/VendingMachinesInfo/findListPage", {
          params: {
            page: this.page,
            pageSize: this.pageSize,
            companyId: companyId,
            code: this.code,
            machinesBaseId: this.machinesBaseId,
            state: this.state
          }
        })
        .then(response => {
          if (
            response.data.code == 0 &&
            response.data.data.findListPage.list.length != 0
          ) {
            this.pageDate = response.data.data.findListPage.list;
    
            this.currentPage = response.data.data.findListPage.page.currentPage;
            this.totalResult = response.data.data.findListPage.page.totalResult;
            this.$message.success("成功");
          } else {
            this.pageDate = [];
            this.totalResult = 0;
            this.$message("暂无该数据");
          }
          loading.close();
        })
        .catch(error => {
          loading.close();
        
        });
    },

    //查询
    searchBtn: function() {
      this.page = 1;
      this.getMachineList();
    },
    // 回车/
    searchEnter: function(e) {
      if (e.keyCode == 13) {
        this.page = 1;
        this.getMachineList();
      }
    }
  }
};
</script>

<style scoped>

</style>
